<template>
  <div>
    <div class="title" style="margin-top:6px">今日</div>
    <div class="num-layout">
      <div class="right one">
        <p class="large">
          {{ currentdaycount.qty ? currentdaycount.qty : '/' }}
        </p>
        <p class="text">任务数量</p>
      </div>

      <div class="right three">
        <p class="large">
          {{ currentdaycount.ywgqty ? currentdaycount.ywgqty : '/' }}
        </p>
        <p class="text">已完工数</p>
      </div>

      <div class="right two">
        <p class="large">
          <!-- {{
            num - Number(currentdaycount.ywgqty ? currentdaycount.ywgqty : 0)
          }} -->
          {{ currentdaycount.wwgqty ? currentdaycount.wwgqty : '/' }}
        </p>
        <p class="text">未完工数</p>
      </div>

      <div class="right four">
        <p class="large">
          {{ currentdaycount.bfqty ? currentdaycount.bfqty : '/' }}
        </p>
        <p class="text">报废数量</p>
      </div>
    </div>
    <div class="title">昨日</div>
    <div class="num-layout">
      <div class="right one">
        <p class="large">
          {{ yesterdaycount.qty ? yesterdaycount.qty : '/' }}
        </p>
        <p class="text">任务数量</p>
      </div>

      <div class="right three">
        <p class="large">
          {{ yesterdaycount.ywgqty ? yesterdaycount.ywgqty : '/' }}
        </p>
        <p class="text">已完工数</p>
      </div>

      <div class="right two">
        <p class="large ">
          {{ yesterdaycount.wwgqty ? yesterdaycount.wwgqty : '/' }}
        </p>
        <p class="text">未完工数</p>
      </div>

      <div class="right four">
        <p class="large">
          {{ yesterdaycount.bfqty ? yesterdaycount.bfqty : '/' }}
        </p>
        <p class="text">报废数量</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Num',
  data() {
    return {
      num: 3008,
    }
  },
  props: {
    yesterdaycount: {
      type: Object,
      default: function() {
        return {}
      },
    },
    currentdaycount: {
      type: Object,
      default: function() {
        return {}
      },
    },
  },
  mounted() {},
}
</script>

<style lang="less" scoped>
.dv-border-box-6 {
  display: grid;
  place-content: center;
}
.one {
  color: #01c0ff;
}
.two {
  color: #ffa421;
}
.three {
  color: #39fb9e;
}
.four {
  color: #fa563b;
}

.title {
  // .px2font(16);
  font-size: 16px;
  color: #fff;
  text-align: center;
  .px2vh(height, 48);
  .px2vw(width, 180);
  /* height: 30px; */
  padding-top: 4px;
  /* background: linear-gradient(135deg, #286ae9, rgba(0, 0, 0, 0.1)); */
  margin-top: 10px;
  margin-bottom: 7px;
  background: url(../../assets/tit_bj.png) no-repeat;
  background-size: 100% 100%;
}
.num-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 12vh;
  grid-gap: 10px;
  place-items: center;
  place-content: center;
}
.right {
  /* background: url(../../assets/box1.png) center center;
  background-size: cover; */
  height: 100%;
  width: 100%;
  box-shadow: inset 0px 0px 20px 0px rgba(0, 118, 209, 0.5);
  display: grid;
  place-content: center;
  /* border-radius: 8px; */
  border: 1px solid #13148c;
  /* background: rgba(0, 0, 0, 0.1); */
}
.large {
  font-size: 28px;
}

.icon-layout .right {
  flex: 1;
}
.right .text {
  font-size: 13px;
}
</style>
